<example name="Dialog Ng">
  <file type="html" disable-auto-size>
    <div ng-app="Example.dialog" ng-strict-di class="long-page">

      <script type="template" id="dialog-template">
        <div>
          <div class="ring-form__group">
            <label class="ring-form__label" for="dialog__key">Key</label>
            <div class="ring-form__control">
              <input id="dialog__key" class="ring-input" type="text">
            </div>
          </div>

          <div class="ring-form__group">
            <label class="ring-form__label" for="dialog__name">Name</label>
            <div class="ring-form__control">
              <input id="dialog__name" class="ring-input" type="text">
              <div class="ring-error-bubble active">Wrong value</div>
              <div class="ring-form__control__description">Description</div>
            </div>
          </div>

          <div class="ring-form__group">
            <label for="textarea-demo" class="ring-form__label">Textarea</label>
            <div class="ring-form__control">
              <textarea id="textarea-demo" class="ring-input"></textarea>
            </div>
          </div>

          <div class="ring-form__group">
            <label for="rg-select-demo" class="ring-form__label">Select</label>
            <div class="ring-form__control">
              <rg-select
                options="item.name for item in dialogExampleCtrl.arr track by item.name"
                id="rg-select-demo"></rg-select>
            </div>
          </div>

        </div>
      </script>

      <div rg-dialog=""></div>
      <div ng-controller="ExampleCtrl as ctrl">
        <rg-button ng-click="ctrl.showDialog()">Show dialog</rg-button>
      </div>
    </div>
  </file>
  <file type="css">
    :global(.custom-css-class-button-right) {
      float: right;
    }

    :global(.long-page) {
      height: 2000px;
    }
  </file>
  <file type="js">
    import '@jetbrains/ring-ui/components/panel/panel.scss';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';

    import 'angular/angular';
    import Dialog from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng';
    import Select from '@jetbrains/ring-ui/components/select-ng/select-ng';
    import Button from '@jetbrains/ring-ui/components/button-ng/button-ng';

    angular.module('Example.dialog', [Dialog, Select, Button]).
      controller('ExampleCtrl', function ($q, $timeout, dialog) {
        this.showDialog = function () {
          dialog.show({
            cssClass: 'custom-css-class',
            title: 'Test',
            closeOnClick: true,
            shortcuts: {
              'ctrl+enter': angular.noop
            },
            template: document.getElementById('dialog-template').innerHTML,
            controllerAs: 'dialogExampleCtrl',
            controller: 'DialogExampleCtrl',
            buttons: [
              {
                label: 'Save',
                default: true,
                action: angular.noop
              },
              {
                label: 'Cancel',
                close: true
              },
              {
                label: 'Dangerous Action',
                cssClasses: 'ring-button_danger custom-css-class-button-right',
                action: function () {
                  return $timeout(angular.noop, 2000).
                    then(() => $q.reject('Some error'));
                }
              }
            ]
          })
            .catch(() => console.log('dialog rejected'));
        };

        $timeout(() => this.showDialog());
      }).
      controller('DialogExampleCtrl', function () {
        var dialogExampleCtrl = this;
        dialogExampleCtrl.arr = [{name: 'Ada'}, {name: 'Nik'}];
      });
  </file>
</example>

<example name="Dialog Ng in sidebar">
  <file type="html" disable-auto-size>
    <div ng-app="Example.dialog" ng-strict-di>

      <script type="template" id="dialog-template">
        <div>
          <div class="ring-form__group">
            <label class="ring-form__label" for="dialog__key">Key</label>
            <div class="ring-form__control">
              <input id="dialog__key" class="ring-input" type="text">
            </div>
          </div>
        </div>
      </script>

      <rg-sidebar show="true">
        <rg-dialog in-sidebar="true" active="true"></rg-dialog>
      </rg-sidebar>

      <div ng-controller="ExampleCtrl as ctrl">
        <rg-button ng-click="ctrl.showDialog()">Show dialog</rg-button>
      </div>
    </div>
  </file>

  <file type="js">
    import '@jetbrains/ring-ui/components/panel/panel.scss';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';

    import angular from 'angular';
    import Sidebar from '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng'
    import Dialog from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng';
    import Select from '@jetbrains/ring-ui/components/select-ng/select-ng';
    import Button from '@jetbrains/ring-ui/components/button-ng/button-ng';

    angular.module('Example.dialog', [Dialog, Select, Button, Sidebar]).
      controller('ExampleCtrl', function ($q, $timeout, dialogInSidebar) {
        this.showDialog = function () {
          dialogInSidebar.show({
            title: 'Test',
            shortcuts: {
              'ctrl+enter': angular.noop
            },
            template: document.getElementById('dialog-template').innerHTML,
            controllerAs: 'dialogExampleCtrl',
            controller: function () {
              this.arr = [{name: 'Ada'}, {name: 'Nik'}];
            },
            buttons: [
              {
                label: 'Save',
                default: true,
                action: angular.noop
              },
              {
                label: 'Cancel',
                close: true
              }
            ]
          });
        };

        $timeout(() => this.showDialog(), 500);
      });
  </file>
</example>

<example name="Dialog Ng with Overridden Footer">
  <file type="html">
    <div ng-app="Example.dialog" ng-strict-di class="long-page">

      <script type="template" id="dialog-template">
        <div>
          <div class="ring-form__group">
            <label class="ring-form__label" for="dialog__name">Name</label>
            <div class="ring-form__control">
              <input id="dialog__name" class="ring-input" type="text">
            </div>
          </div>

          <rg-dialog-footer>
            <rg-button>A button</rg-button>
          </rg-dialog-footer>
        </div>
      </script>

      <div rg-dialog=""></div>
      <div ng-controller="ExampleCtrl as ctrl">
        <rg-button ng-click="ctrl.showDialog()">Show dialog</rg-button>
      </div>
    </div>
  </file>
  <file type="css">
    :global(.custom-css-class-button-right) {
      float: right;
    }

    :global(.long-page) {
      height: 2000px;
    }
  </file>
  <file type="js">
    import '@jetbrains/ring-ui/components/panel/panel.scss';
    import '@jetbrains/ring-ui/components/input/input.scss';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';

    import angular from 'angular';
    import Dialog from '@jetbrains/ring-ui/components/dialog-ng/dialog-ng';
    import Button from '@jetbrains/ring-ui/components/button-ng/button-ng';

    angular.module('Example.dialog', [Dialog, Button]).
      controller('ExampleCtrl', function ($q, $timeout, dialog) {
        this.showDialog = function () {
          dialog.show({
            cssClass: 'custom-css-class',
            title: 'Test',
            closeOnClick: true,
            template: document.getElementById('dialog-template').innerHTML,
            controllerAs: 'dialogExampleCtrl',
            controller: 'DialogExampleCtrl',
          }).catch(() => console.log('dialog rejected'));
        };

        $timeout(() => this.showDialog());
      });
  </file>
</example>
